<template>
  <!--  轮播图开始  -->
  <div
    id="carouselExampleIndicators"
    class="carousel slide"
    data-bs-ride="carousel"
  >
    <div class="carousel-indicators" v-if="imageUrlList.length > 0">
      <template v-for="(item, index) in imageUrlList" :key="index">
        <button
          v-if="index == activeIndex"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          :data-bs-slide-to="index"
          class="active"
          :aria-current="true"
          :aria-label="`Slide ${index}`"
        ></button>
        <button
          v-else
          type="button"
          data-bs-target="#carouselExampleIndicators"
          :data-bs-slide-to="index"
          :aria-label="`Slide ${index}`"
        ></button>
      </template>
    </div>
    <div class="carousel-inner" style="">
      <template v-if="imageUrlList.length == 0">
        <div :class="'carousel-item active'">
          <img
            :src="'https://tse1-mm.cn.bing.net/th/id/R-C.e4ad2d35c19797b68c133649bd40f131?rik=yHykwfVeVebx5g&riu=http%3a%2f%2fwww.codeofaninja.com%2fwp-content%2fuploads%2f2014%2f05%2fbootstrap-tutorial-for-beginners.jpg&ehk=wdiPpb9yk76qpUeXHSD6i4aZK6btLND%2f2U0bLKIUKpU%3d&risl=&pid=ImgRaw&r=0'"
            class="d-block w-100"
            alt="..."
          />
        </div>
      </template>
      <template v-for="(item, index) in imageUrlList" :key="index">
        <div
          :class="
            index == activeIndex ? 'carousel-item active' : 'carousel-item'
          "
        >
          <img :src="item.url" class="d-block w-100" alt="..." />
        </div>
      </template>
    </div>
    <template v-if="imageUrlList.length != 0 || withController">
      <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#carouselExampleIndicators"
        data-bs-slide="prev"
      >
        <!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span> -->
        <div
          style="
            display: inline-block;
            width: 3rem;
            height: 3rem;
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: 100% 100%;
            border: 3px solid #000;
            border-radius: 50%;
          "
        >
          <i class="bi bi-chevron-left" style="color: black; font-size: 1.5rem">
          </i>
        </div>
        <span class="visually-hidden">Previous</span>
      </button>
      <button
        class="carousel-control-next"
        type="button"
        data-bs-target="#carouselExampleIndicators"
        data-bs-slide="next"
      >
        <!-- <span
          class="carousel-control-next-icon border border-2 rounded-circle"
          aria-hidden="true"
        ></span> -->
        <div
          style="
            display: inline-block;
            width: 3rem;
            height: 3rem;
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: 100% 100%;
            border: 3px solid #000;
            border-radius: 50%;
          "
        >
          <!-- <i class="bi bi-arrow-right-circle" style="color: black; font-size: 3rem"> </i> -->
          <i
            class="bi bi-chevron-right"
            style="color: black; font-size: 1.5rem"
          >
          </i>
        </div>
        <span class="visually-hidden">Next</span>
      </button>
    </template>
  </div>
  <!--  轮播图结束  -->
</template>

<script>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "",
  components: {},
  props: {
    imageUrlList: {
      type: Array,
      default: () => [],
    },
    activeIndex: {
      type: Number,
      default: 0,
    },
    withController: {
      type: Boolean,
      default: false,
    },
    withIndicators: Boolean,
  },
  setup(props) {
    const { proxy } = getCurrentInstance();
    const data = reactive({});
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      console.log(props.imageUrlList);
    });
    return {
      ...refData,
    };
  },
};
</script>
<style scoped></style>
